<template>
  <div class="xtx-bread-item">
      <!--
      如果to存在 有值 我们就渲染一个router-link标签
      如果to不存在  那就渲染一个span标签
     -->
     <template v-if="to">
      <router-link :to="to">
        <span><slot /></span>
      </router-link>
     </template>

     <template v-else>
        <span><slot /></span>
     </template>
    <!-- <i class="iconfont icon-angle-right"></i> -->
    <i>{{separator}}</i>
  </div>
</template>

<script>
import { inject } from 'vue'
export default {
  name: 'XtxBreadItem',
  props: {
    to: {
      type: String
    }
  },
  setup () {
    const separator = inject('separator')
    return {
      separator
    }
  }
}
</script>
<style lang="less" scoped>
  .xtx-bread-item{
    // 最后一个i隐藏
    &:nth-last-of-type(1){
      i{
        display: none;
      }
    }
    // 增加hover状态颜色
    a:hover{
      color:#27ba9b;
    }
  }
</style>
